<template>
  <el-drawer
      v-model="showFlag"
      append-to-body
      :before-close="cancel">
    <div style="margin: 20px">
      <el-form :model="dataForm" :rules="rules" ref="formView" label-position="top" size="default">

        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="dataForm.roleName" disabled/>
        </el-form-item>

        <el-form-item label="权限标识" prop="roleKey">
          <el-input v-model="dataForm.roleKey" disabled/>
        </el-form-item>


        <el-form-item label="数据权限" prop="dataScope">
          <el-select v-model="dataForm.dataScope" placeholder="请选择" @change="selectChange">
            <el-option
                v-for="item in dataScopeOptions"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="deptIds" v-if="dataForm.dataScope=='1'">
            <el-tree
                style="width: 100%"
                ref="deptTreeRef"
                node-key="deptId"
                :data="deptTreeList"
                :props="{label:'deptName',children:'children'}"
                show-checkbox
            />

        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="text-align: center;margin-bottom: 10px">
        <el-button size="default" @click="cancel()">取消</el-button>
        <el-button size="default" type="primary" @click="subimt()" v-auth="'system-role-data-scope-update'">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import {treeList} from '/@/api/system/dept'
import {updateRoleDataScope} from "/@/api/system/role";
import {ElMessage,ElNotification} from "element-plus";
const emits = defineEmits(['ok'])
const showFlag = ref(false)
const {proxy} = getCurrentInstance()
const dataScopeOptions = ref([])
const deptTreeList = ref([])
const deptTreeRef = ref()
let currentNode ={}

const rules = reactive({
  roleName: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
  roleKey: [{required: true, message: '请输入角色标识', trigger: 'blur'}]
})
const dataForm = reactive({
  roleId: undefined,
  roleKey: undefined,
  roleName: undefined,
  dataScope: undefined,
  deptIds: []
})


const cancel = () => {
  showFlag.value = false
  dataForm.roleId = undefined
  dataForm.roleKey = undefined
  dataForm.roleName = undefined
  dataForm.dataScope = undefined
  dataForm.deptIds = []
  showFlag.value = false
}

const open = (node) => {
  currentNode=JSON.parse(JSON.stringify(node))
  const {roleId, roleKey, roleName, dataScope, deptIds} = node
  dataForm.roleId = roleId
  dataForm.roleKey = roleKey
  dataForm.roleName = roleName
  dataForm.dataScope = dataScope
  dataForm.deptIds = deptIds
  showFlag.value = true
  if (dataScope == '1') {
    setTimeout(function () {
      deptTreeRef.value.setCheckedKeys(deptIds)
    }, 200)
  }
}
const subimt = async () => {
  if (dataForm.dataScope === '1') {
    dataForm.deptIds=deptTreeRef.value.getCheckedKeys()
    if(dataForm.deptIds.length<=0){
      ElNotification.error({
        message: '请选择授权部门',
        duration: 2000,
      })
     return
    }
  }else dataForm.deptIds=[]

  await proxy.$refs.formView.validate((valid, fields) => {
    if (valid) {
      updateRoleDataScope(dataForm).then(res => {
        ElMessage.success(res.msg)
        cancel()
        emits('ok')
      })
    }
  })
}
const selectChange=(val)=>{
  if(val==='1'){
    setTimeout(function () {
      deptTreeRef.value.setCheckedKeys(currentNode.deptIds)
    }, 100)
  }
}

defineExpose({
  open
})


onBeforeMount(() => {
  // 获取数据权限字典
  proxy.$dictOptions('sys_role_data_scope').then(res => {
    const {data} = res
    dataScopeOptions.value = data
  })
  treeList().then(res => {
    deptTreeList.value = res.data
  })
})

</script>

<style scoped>

</style>